import React, { Component } from "react";
import loginCss from "../css/login.module.css";

export default class login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      style: loginCss,
      username: {
        value: "",
        className: "error",
        tip: "请输入6-12位英文字符、数字、_$不能以数字开头的昵称",
        reg: /^[a-z_$][a-z0-9_$]{5,11}$/i,
      },
      pwd: {
        value: "",
        className: "error",
        tip: "请输入6-12位英文字符、数字、_$的密码",
        reg: /^[a-z0-9_$]{6,12}$/i,
      },
      tel: {
        value: "",
        className: "error",
        tip: "请输入11位手机号",
        reg: /^[1][0-9]{10}$/,
      },
    };
  }
  checkAttr(attr, value, tip) {
    if (this.state[attr].reg.test(value)) {
      this.setState({
        [attr]: { ...this.state[attr], value, tip: "√", className: "success" },
      });
      return true;
    } else {
      this.setState({
        [attr]: { ...this.state[attr], value, tip, className: "error" },
      });
      return false;
    }
  }
  // setName(value){
  //     if(this.state.username.reg.test(value)){
  //         this.setState({
  //             username:{...this.state.username,value,tip:"√",className:"success"}
  //         })
  //     }else{
  //         this.setState({
  //             username:{...this.state.username,value,tip:"请输入6-12位英文字符、数字、_$不能以数字开头的昵称",className:"error"}
  //         })
  //     }
  // }
  // setPwd(value){
  //     if(this.state.pwd.reg.test(value)){
  //         this.setState({
  //             pwd:{...this.state.pwd,value,tip:"√",className:"success"}
  //         })
  //     }else{
  //         this.setState({
  //             pwd:{...this.state.pwd,value,tip:"请输入6-12位英文字符、数字、_$的密码",className:"error"}
  //         })
  //     }
  // }
  // setTel(value){
  //     if(this.state.tel.reg.test(value)){
  //         this.setState({
  //             tel:{...this.state.tel,value,tip:"√",className:"success"}
  //         })
  //     }else{
  //         this.setState({
  //             tel:{...this.state.tel,value,tip:"请输入11位手机号",className:"error"}
  //         })
  //     }
  // }
  checkTip(attr, value, tip) {
    if (this.checkAttr(attr, value, tip)) {
      let numreg = /[0-9]/;
      let stringUpreg = /[A-Z]/;
      let stringLowreg = /[a-z]/;
      let count =
        numreg.test(value) + stringLowreg.test(value) + stringUpreg.test(value);
      let result = "弱";
      switch (count) {
        case 2:
          result = `<button style="width:100px">中</button>`;
          break;
        case 3:
          result = `<button style="width:150px">强</button>`;
          break;
        default:
          result = `<button style="width:50px">弱</button>`;
      }

      this.setState({
        pwd: {
          ...this.state.pwd,
          tip: result,
          value,
          className: "success",
        },
      });
    }
  }
  loginBtn() {
    // if(this.state.username.className==this.state.pwd.className&&this.state.pwd.className==this.state.tel.className&&this.state.tel.className=="success"){
    //     alert("登陆成功");
    // }else{
    //     alert("登陆失败");
    // }
    let list = Object.values(this.state); //values找对象的值放到一个集合   (keys找属性名称)
    if (list.every((item) => item.className === "success")) {
      //every 里面的条件都满足 结果就是true  有一个不满足结果都是false
      alert("验证通过");
    } else {
      alert("请检查红色提示");
    }
  }
  render() {
    return (
      <>
        <div className={this.state.style.init}>
          <div>
            <span className={this.state.style.txt}>用户名：</span>
            <input
              type="text"
              className={this.state.style.input}
              value={this.state.username.value}
              onChange={(e) => {
                // this.setName(e.target.value);
                this.checkAttr(
                  "username",
                  e.target.value,
                  "请输入6-12位英文字符、数字、_$不能以数字开头的昵称"
                );
              }}
            ></input>
            <br></br>
            <span className={this.state.username.className}>
              {this.state.username.tip}
            </span>
          </div>
          <div>
            <span className={this.state.style.txt}>密码：</span>
            <input
              type="passworld"
              className={this.state.style.input}
              value={this.state.pwd.value}
              onChange={(e) => {
                // this.setPwd(e.target.value);
                this.checkTip("pwd", e.target.value, "请输入6-12位英文字符、数字、_$的密码");
              }}
            ></input>
            <br></br>
            <span
              className={this.state.pwd.className}
              dangerouslySetInnerHTML={{ __html: this.state.pwd.tip }}
            ></span>
          </div>
          <div>
            <span className={this.state.style.txt}>电话：</span>
            <input
              type="text"
              className={this.state.style.input}
              value={this.state.tel.value}
              onChange={(e) => {
                // this.setTel(e.target.value);
                this.checkAttr("tel",e.target.value,"请输入11位手机号");
              }}
            ></input>
            <br></br>
            <span className={this.state.tel.className}>
              {this.state.tel.tip}
            </span>
          </div>
          <div>
            <button
              className={this.state.style.btn}
              onClick={() => {
                this.loginBtn();
              }}
            >
              登录
            </button>
          </div>
        </div>
      </>
    );
  }
}
